<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>

</head>
<body>
<h1>首页</h1>
<form th:action="@{/testRequestBody}" method="post">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit" value="测试@RequestBody">
</form>
<form th:action="@{/testRequestEntity}" method="post">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit" value="测试@testRequestEntity">
</form>
<a th:href="@{/testResponse}" >testResponse通过servletapi的response对象响应浏览器数据</a></br>
<a th:href="@{/testResponseBody}" >testResponseBody响应浏览器数据</a></br>
<a th:href="@{/testResponseUser}" >testResponseUser响应浏览器数据(对象)</a>
<div id="app">
    <a th:href="@{/testAxios}">springmvc处理ajax</a>
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        methods:{
            testAxios:function (event){
                axios({
                    method:"post",
                    url:event.target.href,
                    params:{
                        username:"admin",
                        password:"123456"
                    }
                }).then(function (response){
                    //显示响应数据
                    alert(response.data);
                });
                //取消默认行为
                event.preventDefault();
            }
        }
    });
</script>
</body>
</html>